<template>
  <div class="category-container">
    <!--搜索-->
    <div class="search-box">
      <van-search v-model="searchVal" placeholder="请输入搜索关键字" disabled @click="$router.push('/searchPopup').catch(err => {})" />
    </div>
    <!--搜索弹出-->
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
    <!--分类-->
    <div class="category-box">
      <!--左侧-->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item v-for="item in categoryList" :key="item.id" :title="item.name" @click="clickTabs(item.id)" />
      </van-sidebar>
      <!--右侧内容-->
      <div class="category-main">
        <!--图片-->
        <div class="banner">
          <van-image fit="cover" :src="currentCategory.banner_url" />
          <h2 class="h2">{{currentCategory.front_name}}</h2>
        </div>
        <!--标题-->
        <div class="category-tit">{{currentCategory.name}}</div>
        <!--列表-->
        <div class="category-list">
          <van-grid :column-num="3">
            <van-grid-item v-for="item in currentCategory.subCategoryList" :key="item.id" @click="toProductsDetail(item.id)">
              <van-image fit="cover" :src="item.banner_url" />
              <span class="text">{{item.name}}</span>
              </van-grid-item>
            </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { PostCategoryIndexData, GetCategoryCurrentData } from '@/request/api'
export default {
  name: 'Category',
  data () {
    return {
      searchVal: '', // 搜索框内容
      categoryList: [], // 分类左侧内容
      activeKey: 0, // 当前导航项的索引
      currentCategory: [] // 右侧内容
    }
  },
  created () {
    PostCategoryIndexData().then(res => {
      // 请求成功
      // console.log(res)
      // 左侧内容
      this.categoryList = res.data.categoryList
      // 右侧内容
      this.currentCategory = res.data.currentCategory
    })
  },
  methods: {
    // 点击重新发送请求
    clickTabs (id) {
      // 传入ID，请求当前索引
      GetCategoryCurrentData({
        id: id
      }).then(res => {
        // 请求成功
        // console.log(res)
        // 重新赋值右边内容
        this.currentCategory = res.data.currentCategory
      })
    },
    // 产品列表页跳转
    toProductsDetail (id) {
      this.$router.push('/list?id=' + id)
    }
  }
}
</script>

<style lang="less" scoped>
.category-container{
  padding-top: 54px;
}
.search-box{
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
}
.slide-enter,.slide-leave-to{
  // 过渡开始之前的样式写在这里
  right: -100%;
}
.slide-enter-active,.slide-leave-active{
  // 过渡属性写在这里
  transition: right .3s;
}
.slide-enter-to,.slide-leave{
  // 过渡结束之后的样式写在这里
  right: 0;
}
.category-box{
  width: 100%;
  height: calc(100vh - 54px - 50px);
  display: flex;
  .van-sidebar{
    width: 75px;
    background-color: #f7f8fa;
  }
  .category-main{
    width: 300px;
    overflow-y: auto;
    .banner{
      margin: 0 10px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      .van-image{
        width: 100%;
        height: 140px;
        display: block;
      }
      .h2{
        width: 90%;
        text-align: center;
        font-size: 16px;
        color: #fff;
        text-shadow: 2px 0px 6px #8b0000;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
      }
    }
    .category-tit{
      font-size: 18px;
      color: #333;
      text-align: center;
      padding: 20px 0;
    }
    .category-tit::before{
      content: '';
      width: 30px;
      height: 1px;
      background-color: #ddd;
      display: inline-block;
      margin-right: 10px;
      vertical-align: middle;
    }
    .category-tit::after{
      content: '';
      width: 30px;
      height: 1px;
      background-color: #ddd;
      display: inline-block;
      margin-left: 10px;
      vertical-align: middle;
    }
    .category-list{
      .van-image{
        width: 30px;
        height: 30px;
        display: block;
      }
      .text{
        font-size: 14px;
        color: #333;
        margin-top: 5px;
      }
    }
  }
}
</style>
